<template>
  <div class="zxq">
    <van-nav-bar
      title="专题详情"
      left-text="返回"
      fixed
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 内容 -->
    <div class="hsyyds">
      <div class="bsyyds" v-html="list.content"></div>
    </div>
    <!-- 专题推荐 -->
    <div class="fjyyyds">
      <h3>专题推荐</h3>
      <ul>
        <li v-for="item in xfqyyds" :key="item.id">
          <img :src="item.scene_pic_url" alt="" />
          <p>{{ item.title }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { detailaction } from "@/api/专题/zhuan.js";
export default {
  name: "Zxq",
  data() {
    return {
      list: {},
      xfqyyds: [],
    };
  },
  created() {
    console.log(this.$route.query.id);
    detailaction({
      params: {
        id: this.$route.query.id,
      },
    }).then((res) => {
      console.log(res);
      this.list = res.data.data;
      this.xfqyyds = res.data.recommendList;
    });
  },
};
</script>

<style lang="less" scoped>
.zxq {
  width: 100%;
  .hsyyds {
    margin-top: 50px;
    width: 100%;
    ::v-deep img {
      width: 100%;
    }
  }
  .fjyyyds {
    h3 {
      text-align: center;
      background: #f4f4f4;
      font-size: 0.4rem;
      color: #999;
      padding: 0.4rem 0;
    }
    ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      li {
        width: 100%;
        height: 235px;
        img {
          width: 100%;
          height: 85%;
        }
      }
    }
  }
}
</style>